<!-- 283 -->
<template>
  <div class="page-wrap">
    <a-space class="common-button-group">
      <a-button
        type="primary"
        class="t9-form-wideget-btn-default"
        :loading="searchBtnLoading"
        @click="handleSearch"
        >{{ $t("common_query") }}</a-button
      >
    </a-space>
    <t-query-form
      layout="inline"
      ref="queryForm"
      group="StbCutBankPlan"
      :rules="rules"
     :model="queryForm"
    >
          <a-form-item
            :label="$t('T9_stbCutBankPlanState')"
            name="stbCutBankPlanState"
            prop="stbCutBankPlanState"
          >
            <a-select
              v-model:value="queryForm.stbCutBankPlanState"
              class="select-width"
              :placeholder="$t('common_pleaseSelect')"
              allow-clear
              show-search
            >
             <a-select-option
                v-for="item in options.stbCutBankPlanStateList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item
            :label="$t('T9_productId')"
            name="productId"
            prop="productId"
          >
            <a-select
              v-model:value="queryForm.productId"
              class="select-width"
              show-search
              allow-clear
              :placeholder="$t('common_pleaseSelect')"
            >
              <a-select-option
                v-for="item in options.productIdList"
                :key="item.value"
                :value="item.value"
              >
                {{ item.value }}
              </a-select-option>
            </a-select>
          </a-form-item>
    </t-query-form>
         <a-row
      type="flex"
      justify="space-between"
      align="middle"
      class="global-oper-row mt-2"
    >
      <a-col :span="6" class="global-oper-row-title">{{
        $t("T9_stb2900List")
      }}</a-col>
      <a-col :span="8" class="global-oper-row-extra">
         <a-button  @click="getCreate" type="primary" class="t9-form-wideget-btn-default t9-form-wideget-btn-margin-right">{{ $t("T9_create") }}</a-button>
        <a-button class="t9-form-wideget-btn-default" :loading="exportBtnLoading" @click="getExport" type="primary">{{ $t("T9_toExcel") }}</a-button>
      </a-col>
    </a-row>
    <div class="page-wrap-table">
    <t-table align="center" :data="list.tableData"  max-height="100%" :loading="searchBtnLoading">
      <t-column min-width="120" field="stbCutBank" :title="$t('T9_stbcutBank')" />
      <t-column min-width="80" field="type" :title="$t('T9_type')" />
      <t-column min-width="100" field="groupId" :title="$t('T9_groupId')" />
      <t-column min-width="100" field="state" :title="$t('T9_state')" />
      <t-column min-width="100" field="productId" :title="$t('T9_productId')" />
      <t-column min-width="100" field="owner" :title="$t('T9_owner')" />
      <t-column min-width="100" field="createTime" :title="$t('T9_createTime')" />
      <t-column min-width="100" field="planQty" :title="$t('T9_planQty')" />
      <t-column min-width="100" field="releasedQty" :title="$t('T9_releasedQty')" />
      <t-column min-width="160" field="finishedQty" :title="$t('T9_finishedQty')" />
      <t-column min-width="120" field="autoStbFlag" :title="$t('T9_autoStbFlag')" />
      <t-column min-width="100" field="grade" :title="$t('T9_grade')" />
      <t-column min-width="120" field="destination" :title="$t('T9_destination')" />
      <t-column min-width="100" field="scrappedQty" :title="$t('T9_scrappedQty')" />
      <t-column min-width="120" field="createUser" :title="$t('T9_createUser')" />
    </t-table>
    </div>
  </div>
</template>

<script>
  import { defineComponent } from 'vue'
  import * as api from '@/api/common'
  import initOptionsMixin from '@/mixins/initOptionsMixin'
  import { downloadBlobFile } from '@/utils/download'

  export default defineComponent({
    name: 'StbCutBankPlan',
    components: {},
    mixins: [initOptionsMixin],
    data() {
      return {
        searchBtnLoading: false,
        exportBtnLoading: false,
        export: false,
        list: {
          tableData: []
        },
        options: {
        },
        queryForm: {
          stbCutBankPlanState: undefined,
          productId: undefined
        },
        rules: {
          stbCutBankPlanState: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }],
          productId: [{ required: true, message: this.$t('valid_required2'), trigger: 'change' }]
        }
      }
    },
    computed: {
    },
    watch: {

    },
    created() {
      this.initOptions([{ name: 'productId', params: { shopId: 'ARRAY', version: '80011' } }])
    },
    methods: {
      getCreate() {
         this.$router.push({
        path: 'createCutBankStb',
        query: {}
      })
      },
      getExport() {
       if (!this.list.tableData.length) return
       if (this.exportBtnLoading) return
       this.exportBtnLoading = true
         const obj = {
          dtoName: 'MaskInformationDTO',
          queryId: 'GetMaskList',
          version: '80003',
          menuName: 'maskInformation',
          usage: 'getMaskList',
          export: true,
          ...this.queryForm
        }
        api.getList(obj).then(res => {
          downloadBlobFile(res, 'maskList')
          this.exportBtnLoading = false
        }).catch(error => {
          this.exportBtnLoading = false
          console.log(error)
        })
      },
      handleSearch() {
        this.$refs.queryForm.validate().then(() => {
          this.getList()
        })
      },
      getList() {
         if (this.searchBtnLoading) return
            this.searchBtnLoading = true
        const obj = {
          dtoName: 'MaskInformationDTO',
          queryId: 'GetMaskList',
          version: '80003',
          menuName: 'maskInformation',
          usage: 'getMaskList'
        }
        api.getList({ ...obj, ...this.queryForm }).then(res => {
          this.list.tableData = res
          this.searchBtnLoading = false
        }).catch(error => {
          this.searchBtnLoading = false
          console.log(error)
        })
      }
    }
  })
</script>
<style lang="less" scoped>
.select-width {
  width: 150px;
}
</style>
